<!-- /pages/attendance/checkin.vue -->
<template>
	<view class="checkin-container">
		<view v-if="activeCheckin">
			<view class="checkin-header">
				<text>{{ activeCheckin.course }} 课程签到</text>
				<text>剩余时间: {{ remainingTime }}分钟</text>
			</view>
			
			<view v-if="activeCheckin.type === 'qrcode'" class="qrcode-section">
				<image :src="qrcodeUrl" mode="widthFix" />
			</view>
			
			<view v-else class="code-section">
				<text class="checkin-code">{{ activeCheckin.checkCode }}</text>
			</view>
			
			<button @click="submitCheckin">确认签到</button>
		</view>
		
		<view v-else class="no-checkin">
			<text>当前没有进行中的签到</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeCheckin: null,
				qrcodeUrl: '',
				remainingTime: 0
			}
		},
		onLoad() {
			// 获取当前签到状态
			this.getCheckinStatus()
		},
		methods: {
			async getCheckinStatus() {
				const res = await getCurrentCheckin({
					classId: this.classInfo.id
				})
				if(res.code === 200 && res.data) {
					this.activeCheckin = res.data
					this.startTimer()
				}
			},
			startTimer() {
				// 实现倒计时逻辑...
			},
			async submitCheckin() {
				// 提交签到逻辑...
			}
		}
	}
</script>

<style>
	.checkin-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
	}
	
	.checkin-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20px;
	}
	
	.qrcode-section {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20px;
	}
	
	.code-section {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20px;
	}
	
	.checkin-code {
		font-size: 24px;
		font-weight: bold;
	}
	
	.no-checkin {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
	}
</style>